<!-- 交易市场行情 -->
<template>
  <ContainerSlot>
    <!-- 市场项 -->
    <template slot="categoryBar">
      <CategoryBar class="noIcon" :categoryList="categoryList" :routerIndex="routerIndex" @categoryBar="categoryBar" />
    </template>

    <template slot="contentModule">
      <div class="marketInfo">
        <div class="marketModule flex flex1">
          <div class="content menuBar">
            <div class="title">水产品行情走势图</div>
            <div class="menu">
              <div class="up btn" @click="scroll('up')">
                <i class="el-icon-caret-top"></i>
              </div>

              <!-- 水产品列表 v-clickDown="index"-->
              <div class="menuList">
                <div class="fishList">
                  <div v-for="item, index in tableData" :key="index" :class="isStyle == index ? 'pressDown' : ''"
                    class="fishNameBtn" @click="handleClick(item, index)" v-clickDown="index">
                    {{ item.goodsName }}({{ item.unitName }})
                  </div>
                </div>
              </div>
              <div class="down btn" @click="scroll('down')">
                <i class="el-icon-caret-bottom"></i>
              </div>
            </div>
          </div>
          <!-- 水产品行情走势 - 折线图 -->
          <div class="content lineEchart">
            <div class="title"></div>
            <div class="echarts">
              <AquaticTrendChart style="height: 100%;" :currentAProduct='currentAProduct' ref="aquaticTrendChart">
              </AquaticTrendChart>
            </div>
          </div>
        </div>

        <div class="marketModule flex bottomModule ">
          <div class="content info leftInfo">
            <div class="title">水产品交易总计</div>
            <div class="fishData">
              <!-- 水产品交易统计列表 -->
              <div class="fishInfo flex" v-for="item in tableData" :key="item.goodsId">
                <div class="info flex">
                  <span class="fishName">{{ item.goodsName }}：</span>
                  <span class="fishNum">{{ item.totalSales }} ({{ item.unitName }})</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 水产品种占比饼图 -->
          <div class="content pieChart rightInfo">
            <div class="title">水产品种占比</div>
            <div class="echarts" style="background-color: #ffffff;">
              <AquaticBreedChart style="height: 100%;" :aquaticStatistics='aquaticStatistics' :tableData="tableData"
                v-if="tag">
              </AquaticBreedChart>
            </div>
          </div>

        </div>
      </div>
    </template>
  </ContainerSlot>
</template>

<script>
import ContainerSlot from '@/components/Container';
import CategoryBar from "./components/CategoryBar.vue";             // 上方市场选择项
import MenuList from './components/menuList.vue'                    // 菜单列表
import AquaticTrendChart from './components/aquaticTrendChart.vue'  // 水产品行情走势图
import AquaticBreedChart from './components/aquaticBreedChart.vue'  // 水产品种占比
import TradingMarketManagement from "@/api/market-quotation/trading-market-management/index";      // 交易市场管理
import TMQuaticProduct from "@/api/market-quotation/trading-market-management/tmQuaticProduct.js"; // 交易市场水产品独立接口

export default {
  name: '',
  components: { ContainerSlot, CategoryBar, MenuList, AquaticTrendChart, AquaticBreedChart },
  computed: {},
  data () {
    return {
      routerIndex: 1,
      aquaticStatistics: [],  // 水产品交易统计
      categoryList: [],       // 市场项
      currentMarketId: null,  // 当前市场触发的marketId
      tableData: [],          // 所有水产品
      currentAProduct: {},    // 当前选择的水产品数据
      tag: true,
      isStyle: 0,             // 水产品 - 点击样式切换
      nowFishOffsetHeight:0   // 水产品列表 - 存储当前元素的高度
    }
  },
  created () {
    this.getTradingMarket(); // 获取交易市场
    console.log('父组件：当前市场所有水产品信息', this.tableData);
  },
  mounted () { },
  methods: {
    // 市场项回传
    categoryBar (currentMarketId) {
      this.getAquaticProduct(currentMarketId)  // 当前市场marketId
    },
    // 获取市场项
    async getTradingMarket () {
      let res = await TradingMarketManagement.queryPageByCondition({ page: 1, size: 100000 });
      // console.log("获取交易市场查询", res.data.content);
      if (res.code == 200) {
        this.categoryList = res.data.content;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 获取当前市场下-水产品
    getAquaticProduct (currentMarketId) {
      TMQuaticProduct.queryByMarketId(currentMarketId).then((res) => {
        // console.log('水产品res***',res);
        if (res.code == 200) {
          this.tableData = res.data  // 当前市场下所有水产品
          this.tag = false
          setInterval(() => {
            this.tag = true
          }, 300)
          console.log('当前市场所有水产品信息', this.tableData);
          if (this.tableData.length) {
            this.handleClick(this.tableData[0], 0)
          } else {
            // this.$refs.aquaticTrendChart.dateCurrentAProduct('暂无种类')
            this.$refs.aquaticTrendChart.isShow = true
            this.$refs.aquaticTrendChart.dateCurrentAProduct('暂无种类')
          }
        }
      })
    },
    // 每项水产品
    handleClick (item, index) {
      this.currentAProduct = item  // 当前选择的水产品数据
      this.isStyle = index         // 默认样式
      console.log('item', item)
      // console.log('当前水产品数据',this.currentAProduct);
      this.$refs.aquaticTrendChart.dateCurrentAProduct(item.goodsName, this.currentAProduct)
    },
    // 水产品列表上下切换功能
    scroll(scroll) {
      let content = document.querySelector(".menuList");
        // 向上切换按钮
        if (scroll=='up') {
          this.isStyle -= 1 && this.isStyle>0    
          content.scrollTop -= this.nowFishOffsetHeight + 3;                       
        }
        // 向下切换按钮
        if (scroll=='down') {
          this.isStyle += 1 && this.isStyle<this.tableData.length-1  
          content.scrollTop += this.nowFishOffsetHeight + 6;           
        }
    },
  },
  directives: {
    // 水产品列表上下切换功能
    clickDown: {
      // 用于默认触发第一个按钮；
      inserted(el,binding,VNode) {
        if(binding.value===0){
          VNode.context.nowFishOffsetHeight=el.offsetHeight 
        }
      },
      // 用于切换时触发按钮；
      update(el,binding,VNode) {
        if(binding.value===VNode.context.isStyle){
          el.click()
          VNode.context.nowFishOffsetHeight=el.offsetHeight
        }
      }
    }
},
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: flex-start;

}

.flex1 {
  height: 300px;
}

/* 内容区 */
.marketInfo {
  height: calc(100% - 20px);
  margin: 10px;
  padding: 10px;
  box-shadow: 0px 0px 10px 0px #bababa;
  border-radius: 4px;
  box-sizing: border-box;
  /* overflow: auto; */
  overflow-x: scroll;

  /* 水产品行情走势图+水产品交易统计 */
  .marketModule {

    /* height: 50%; */
    /* overflow: auto; */


    /* 水产品交易统计 */
    .fishData {
      height: 100%;
      overflow: auto;

      .fishInfo {
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-between;

        .info {
          width: 100%;
          height: 20px;
          font-size: 16px;
          line-height: 20px;
          border-left: 4px solid #4795e4;
          padding: 0 20px;
          margin: 10px 20px;
        }
      }
    }

    .echarts {
      height: calc(100% - 50px);
      padding: 20px 0;
      margin-left: 20px;
      background: #f4f9ff;
      box-sizing: border-box;
      /* overflow-x: scroll;
      overflow-y: hidden; */
      overflow: auto;
    }

    .menuBar {
      width: 200px;

      .menu {
        height: calc(100% - 50px);

        .btn {
          height: 30px;
          background: #c3e1ff;
          color: #77b0e9;
          line-height: 30px;
          text-align: center;
          font-size: 20px;
          cursor: pointer;
        }

        .menuList {
          width: 200px;
          height: calc(100% - 60px);
          overflow: auto;

          /* 水产品列表 */
          .fishList {
            padding: 6px 10px 0 10px;

            /* 水产品列表按钮 */
            .fishNameBtn {
              width: 100%;
              height: 100%;
              text-align: center;
              margin-bottom: 6px;
              padding: 6px 0;
              border: 2px solid rgba(99, 179, 237, 0.6);
              color: rgba(0, 0, 0, 0.6);
              border-radius: 10px;
              box-sizing: border-box;
              cursor: pointer;

              &:focus {
                font-size: 16px;
                background: #90bfee;
                color: rgb(255, 255, 255);
              }
            }

            /* 水产品每一项-点击后样式 */
            .pressDown {
              background-color: #4da7d1;
              color: #fff;
              border: 4px solid rgb(72, 229, 247);
              box-sizing: border-box;
            }
          }
        }
      }
    }

    /* 折线图区域 */
    .lineEchart {
      /* width: calc(100% - 200px); */
      width: 100%;
      /* overflow: hidden; */
      /* background: #000; */
    }

    .info,
    .pieChart {
      width: 50%;
    }

    /* 饼图 */
    .pieChart {
      /* overflow-x: scroll; */
    }

    .title {
      height: 30px;
      border-bottom: 1px solid #d6e5f3;
      margin: 10px 0;
      font-size: 16px;
      color: #59a1e8;
      line-height: 30px;
    }
  }

  /* .leftInfo{
    flex-grow: 1 !important;
  }
  .rightInfo{
    flex-grow: 2 !important;

  } */
}

::v-deep .childModule {
  height: 100% !important;
}

.bottomModule {
  height: calc(100% - 340px) !important;
}
</style>